[[template "header" .]]
<script>
	var app = angular.module("cron", ["ngNotify", "duScroll", "angular-humanize"])
		.value('duScrollOffset', 30);
	app.controller("MainCtrl", function($scope, $http, ngNotify){
		// ngNotify.set("Hi");
		$scope.records = [[.Records]];
		current = $scope.current = [[.Current]];
		console.log($scope.records);
		var termStatus = document.getElementById("term-status");
		if (current.status == 'failure'){
			termStatus.innerText = "exit status: " + current.exit_code;
		} else {
			termStatus.innerText = current.status;
		}
		var top = 400;
		var duration = 2000;


	});
</script>

<div class="container" ng-controller="MainCtrl">
	<div class="row">
		<div class="col-md-3" id="left">
			<form id="search-form" class="form">
				<div class="input-group">
					<input type="input" ng-model="search" class="form-control" placeholder="Search for ..." autofocus>
					<span class="input-group-btn">
						<button class="btn btn-default" type="submit">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					</span>
				</div>
			</form>
			<nav class="affix-top">
				<div>
					All Tasks <a class="pull-right" href="/settings">
						<span class="glyphicon glyphicon-plus"></span>
					</a>
				</div>
				<ul class="nav side-nav">
					<li ng-class="t.status" class="left-status" ng-repeat="t in records | filter:search">
						<div class="item-title">
							<a ng-class='t.status' href="/{{t.name}}">
								<h3><span class="glyphicon" ng-class="t.exit_code ? 'glyphicon-remove' : 'glyphicon-ok'"></span>
								{{t.name}}</h3>
							</a>
							<span class="pull-right">
								<a class="quick-link" ng-hide="t.status == 'pending'" href="/{{t.name}}/builds/{{t.index}}">
									#{{t.index}}
								</a>
								<a class="quick-link" href="/settings/{{t.name}}">
									<span class="glyphicon glyphicon-cog"></span>
								</a>
							</span>
						</div>
						<div class="item-info">
							<span class="glyphicon glyphicon-time"></span>
							Duration: 
							<span ng-if="['success', 'failure'].indexOf(t.status) >= 0">
								{{t.duration/1000000000}} sec
							</span>
							<span ng-if="t.status == 'pending'">
								...
							</span>
						</div>
						<div class="item-info">
							<span class="glyphicon glyphicon-calendar"></span>
							Finished: 
							<span ng-if="['success', 'failure'].indexOf(t.status) >= 0">
								{{t.created_at | humanizeRelativeTime}}
							</span>
							<span ng-if="t.status == 'pending'">
								...
							</span>
						</div>
					</li>
				</ul>
			</nav>
		</div>
		<div class="col-md-9">
			<div id="main-content" du-scroll-container>
				<div>
					<h2>{{current.name}} <small>#{{current.index}}</small><a class="btn btn-sm btn-default pull-right" href="/settings/{{current.name}}">Setting</a></h2>
					<div>
						<section class="tile">
							<div class="tile-status" ng-class="current.exit_code ? 'failure' : 'success'">
								<span class="icon-status glyphicon" ng-class="current.exit_code ? 'glyphicon-remove' : 'glyphicon-ok'"></span>
							</div>
							<div class="tile-main">
								exit status: {{current.exit_code}}
							</div>
							<div class="tile-additional">
							</div>
						</section>
					</div>

					<h2>Terminal <small id="term-status"></small></h2>
					<pre id="terminal"></pre>
				</div>

				<script>
					$(function(){
						var httpsEnabled = window.location.protocol == "https:";
						var url = (httpsEnabled ? 'wss://' : 'ws://') + window.location.host +'/ws/' + 
								current.name + '/'+current.index;
						var protocols = ["cron"];
						var ws = new WebSocket(url, protocols);

						ws.onopen = function(event){
							console.log("nice connected");
						}
						ws.onmessage = function(event){
							console.log(event);
							var term = document.getElementById("terminal");
							var termStatus = document.getElementById("term-status");
							var p = JSON.parse(event.data);
							switch(p.type){
							case "stream":
								term.innerText = term.innerText + p.body;
								console.log(p.body);
								break;
							case "whole":
								term.innerText = p.body;
								break;
							case "before":
								term.innerText = p.body;
								break;
							case "finish":
								termStatus.innerText = "exit:" + p.body;
								// p.body;
								break;
							}
						}
						ws.onclose = function(event){
							console.log("Closed");
						}
						ws.onerror = function(event){
							console.log("got a error", event)
						}
					});
				</script>
			</div>
		</div>
</div>
[[template "footer" .]]
